<template>
    <div class="login_bc">
        <div class="login ">
            <span class="logo">ikun</span>
            <div class="box">
                <div class="box_zm">
                    <span class="text">账号</span>
                    <input class="input" type="text" v-model="username" placeholder="请输入账号">
                </div>
                <div class="box_zm">
                    <span class="text">密码</span>
                    <input class="input" type="text" v-model="password" placeholder="请输入密码">
                </div>
                <div style="display: flex;width: 480px;justify-content: space-between;padding: 10px;">
                    <div style="display: flex;align-items: center;">
                        <input type="radio" class="agree"><span class="text_fab53d">自动登录</span>
                    </div>
                    <div>
                        <span class="text_fab53d">忘记密码</span>
                    </div>
                </div>
                <div style="display: flex;width: 480px;justify-content: space-between;padding: 10px;">
                    <div style="display: flex;align-items: center;">
                        <input type="radio" class="agree"><span class="text_fab53d">同意用户协议</span>
                    </div>
                    <div>
                        <span class="text_fab53d">查看用户协议</span>
                    </div>
                </div>
                <button class="dkl_botton" @click="login">登陆</button>
            </div>
            <!-- <div style="display: flex;width: 500px;justify-content: space-between;margin-top: 40px;">
                <div style="display: flex;align-items: center;">
                    <svg style="width: 20px;height: 20px;" t="1715409501164" class="icon" viewBox="0 0 1024 1024"
                        version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2072" width="200" height="200">
                        <path
                            d="M917.3 432.4c-7.2-38.2-33.7-63.5-68.6-63.5h-1.5c-35.3 0-64.1-28.9-64.1-64.4 0-8 3.9-19.7 5.6-23.8 15-33.8 3.5-75.3-27.7-97.2l-97.8-54.7-4-1.9c-9.8-4.3-20.7-6.3-31.5-6.3-22.6 0-45.4 8.8-60.7 24.7-14.6 15.1-40.8 32.6-52.8 32.6-12.1 0-38.5-17.9-53-33.2-15.3-16.2-38.1-25.3-60.9-25.3-10.7 0-21.5 2-31.5 6.3l-102.1 55.9-4 2.6c-30.4 21.2-41.9 62.6-27 96.4 1.9 4.4 5.8 16 5.8 24 0 35.5-28.8 64.4-66.6 64.4h-1.6c-32.4 0-58.9 25.3-66.1 64.1-2 10.9-8.4 48.9-8.4 80.4 0 31.6 6.4 69.5 8.5 81.1 7.2 38 33.8 63.5 66.2 63.5h3.9c35.3 0 64.1 28.9 64.1 64.3 0 7.7-3.6 19-5.7 23.8-14.9 33.8-3.5 75.2 27.1 96.8l96.4 54.4 3.9 1.9c9.8 4.4 20.6 6.4 31.5 6.4 23 0 46.3-9.3 61.5-26 14.3-15.5 42-34.7 53.9-34.7 12.4 0 39.4 19.1 54.2 35.4 15.3 16.9 37.6 26.7 61.4 26.7 11.2 0 21.8-2.1 31.7-6.4l100.3-55.3 4-2.6c30.3-21.2 41.8-62.6 26.9-96.3-1.8-4.4-5.7-16-5.7-24 0-35.5 28.8-64.3 66.8-64.3 32.6-0.4 60.1-24.9 67.5-64.1 2-10.9 8.4-48.9 8.4-80.4 0.2-31.7-6.3-69.8-8.3-81.3z m-58.1 150.8c-1.4 7.6-5.4 15.7-10.2 15.7-69.8 0-125 54.2-125 123.4 0 20.5 7.9 41 10.3 46.8 4 9 0.8 20.2-6.3 25.1l-0.2 0.1-95.5 52.7c-1.9 0.6-4 0.9-6.4 0.9-6.9 0-13.4-2.7-17.4-7.1-5.4-5.9-51.5-54.9-98.1-54.9-47.4 0-96.9 53.2-97.4 53.7-3.8 4.2-11.2 7-18.1 7-2.6 0-5.1-0.4-7.1-1.2l-1-0.5-91.3-51.5c-6.4-5.6-9-15.9-5.6-23.4 2.1-5 10.7-26.4 10.7-47.7 0-68-55.3-123.4-123.2-123.4h-3.9c-1.4-0.3-6.1-4.8-8.2-15.4-1.7-9.3-7.4-43.7-7.4-70.1 0-21 3.8-49.8 7.4-69.9 1.9-10.1 6.3-14.9 7.7-15.6h1.9c70.4-0.1 125.6-54.3 125.6-123.5 0-21.3-8.6-42.8-10.4-46.9-3.8-8.6-0.9-19.4 5.8-24.6l1-0.6 96.8-53.1c1.9-0.6 4.2-0.9 6.5-0.9 6.9 0 14.1 2.8 18 6.9 2 2.1 49.5 51.6 95.9 51.6 45.8 0 93.2-48.5 95.2-50.6 3.9-4 11.3-6.8 18.2-6.8 2.7 0 5.2 0.4 7.2 1.2l0.8 0.4 92.9 51.9c6.7 5.9 9.5 16.1 6.1 23.8-2.1 4.9-10.7 26.2-10.7 47.7 0 68.1 55.2 123.4 123.2 123.4 8.4 0 11.1 10.8 12 15.4 3.6 19.7 7.5 48.8 7.5 70.1 0.2 21.6-3.8 51.1-7.3 69.9z"
                            fill="#FAB53D" p-id="2073"></path>
                        <path
                            d="M512.3 355.7c-87 0-157.6 70.5-157.6 157.5s70.5 157.6 157.6 157.6c87 0 157.5-70.5 157.5-157.6 0-87-70.5-157.5-157.5-157.5z m0 256c-54.3 0-98.5-44.1-98.5-98.4 0-54.3 44.2-98.4 98.5-98.4s98.4 44.1 98.4 98.4c0 54.2-44.1 98.4-98.4 98.4z"
                            fill="#FAB53D" p-id="2074"></path>
                    </svg>
                </div>
                <div>
                    <span class="text_fab53d">新用户注册</span>
                </div>
            </div> -->
        </div>

    </div>
</template>

<script>
import '../assets/css/index.css'
import { Postlogin } from '../api/login.js';
import { ElMessage } from 'element-plus'
import { mapMutations } from "vuex";
import Cookie from "js-cookie";
export default {
    data() {
        return {
            message:null,
            // username: '段坤林',
            // password: '123456',
            username: '王强',
            password: '12345e',
        }
    },
    methods: {
        ...mapMutations(["SET_USER","getToken"]),
        login() {
           
            
                Postlogin({ login: this.username, password: this.password }).then(res => {
                    Cookie.set("token", res.data.data.token);
                    
                    this.SET_USER(res.data.data.user);
                    
                    
                    console.log('11111');
                    console.log('qqqqqqqqqe');
                    
                    ElMessage({
                        message: '登陆成功',
                        type: 'success',
                    })
                    this.$router.push('/PageCommunity')
                    this.getToken(res.data.data.token)
                    // this.$router.push('/InterestSurvey');
                }).catch((error) => {
                    // ElMessage.error({
                    //     message: error+'密码或账户有误' ,
                    // })
                });

   
        }
    }
}
</script>

<style lang="less" scoped>
@primary-color: #e7e7e7;
@secondary-color: #6f2d00;
@bcy-color: #ff5100;
@ctext: #ffffff;

.text_fab53d {
    color: rgb(255, 123, 0);
    font-size: 16px;
    line-height: 20px;
}

.login_bc{
    // position: fixed;
    width: 100%;
    // top: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    // transform:translateY(-300px);
    height: 100vh;
    // background-color: #00000067;
    // z-index: 999;
    .login {
    
            width: 500px;
            height: 600px;
            padding: 20px;
            display: flex;
            align-items: self-start;
            flex-direction: column;
            // justify-content: space-between;
            border-radius:8px;
            background-color: @primary-color;
    
            .logo {
                width: 150px;
                height: 80px;
                font-size: 24px;
                line-height: 80px;
                margin-bottom: 20px;
                text-align: center;
                color: @ctext;
                border-radius: 4px;
                background-color: @secondary-color;
            }
    
            .box {
                width: 500px;
                height: 365px;
                margin-bottom: 10px;
    
                .box_zm {
                    width: 500px;
                    height: 75px;
                    margin-bottom: 20px;
                    border-radius: 4px;
                    overflow: hidden;
                    display: flex;
                    background-color: @secondary-color;
                    justify-content: space-between;
    
                    .text {
                        width: 200px;
                        height: 75px;
                        font-size: 25px;
                        color: @ctext;
                        background-color: @bcy-color;
                        line-height: 55px;
                        padding: 10px;
                    }
    
                    .input {
                        outline: none;
                        width: 425px;
                        height: 75px;
                        font-size: 25px;
                        color: @ctext;
                        padding: 0 10px 0 10px;
                        border: 0px solid #000;
                        background-color: @secondary-color;
                    }
                }
            }
    
            .agree {
                width: 20px;
                height: 20px;
                margin-right: 10px;
                border: 1px solid @primary-color;
            }
    
    
            .dkl_botton {
                width: 500px;
                height: 75px;
                background-color: @secondary-color;
                border: 0 solid #000;
                border-radius: 4px;
                font-size: 25px;
                color: @ctext;
            }
    
            .Login_mode {
                width: 500px;
                height: 2px;
                background-color: #fff;
                background-color: @secondary-color;
                display: flex;
                justify-content: center;
                align-items: center;
                margin-bottom: 20px;
    
                div {
                    padding: 0 12px 0 12px;
                    height: 20px;
                    background-color: @primary-color;
                }
            }
    
            .other {
                width: 500px;
                display: flex;
                align-items: center;
    
                // justify-content: space-between;
                div {
                    width: 60px;
                    height: 60px;
                    border-radius: 4px;
                    border: 2px solid @secondary-color;
                    margin-right: 20px;
    
                    img {
                        width: 40px;
                        height: 40px;
                        padding: 10px;
                    }
    
                    span {
                        width: 60px;
                        display: flex;
                        font-size: 14px;
    
                        justify-content: center;
                        color: @bcy-color;
                    }
                }
            }
    
    
        }
}

</style>